<template>
  <el-container>
    <div class="user-info-group">
      <div class="user-info">
        <img src="../assets/logo.jpg" class="user-face" alt="">
        <p class="user-info-text user-info-name">{{userInfo.name}}</p>
        <p class="user-info-text">2018-07-08 16:06:37</p>
      </div>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>

    <div class="log-table">
      <el-row>
        <el-button
          icon="fa fa-fw fa-refresh"
          size="mini"
          type="info"
          @click="handleEdit(scope.$index, scope.row)">
        </el-button>

        <el-button
          icon="fa fa-fw fa-plus"
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">添加
        </el-button>

        <el-button
          icon="fa fa-fw fa-trash-o"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>

        <el-button
          icon="fa fa-fw fa-toggle-on"
          size="mini"
          type="success"
          @click="handleDelete(scope.$index, scope.row)">启用
        </el-button>

        <el-button
          icon="fa fa-fw fa-toggle-off"
          size="mini"
          type="warning"
          @click="handleDelete(scope.$index, scope.row)">停用
        </el-button>
      </el-row>

      <el-table
        ref="multipleTable"
        :data="tableData3"
        tooltip-effect="dark"
        border
        :default-sort="{prop: 'date', order: 'descending'}"
        :row-class-name="tableRowClassName"
        size="small">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="name"
          label="操作记录">
        </el-table-column>

        <el-table-column
          prop="linked"
          label="链接"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="ip"
          label="ip"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="date"
          label="操作时间"
          sortable>
          <template slot-scope="scope">
            <i class="fa fa-clock-o fa-fw"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              circle
              icon="fa fa-fw fa-pencil"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">
            </el-button>

            <el-button
              circle
              icon="fa fa-fw fa-trash-o"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">
            </el-button>

            <el-button
              circle
              icon="fa fa-fw fa-toggle-on"
              size="mini"
              type="success"
            >
            </el-button>

            <el-button
              circle
              icon="fa fa-fw fa-toggle-off"
              size="mini"
              type="warning"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>

  </el-container>
</template>

<script>
  export default {
    created() {
      // this.userInfo = JSON.parse(localStorage.getItem(this.constant.USER_INFO));
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        userInfo: {},
        ruleForm: {
          username: '',
          email: '',
          nickname: '',
          pass: '',
          checkPass: ''
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ]
        },
        tableData3: [
          {
            date: '2018/7/8',
            name: '用户登录',
            linked: 'https://cdn.demo.fastadmin.net/assets/img/avatar.png',
            ip: '127.0.0.1'
          },
        ],
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      handleEdit(index, row) {
        this.$router.push({
          name: '',
          params: {
            id: 1
          }
        })
        // this.$router.go(1)
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>

  .el-container {
    /*display: block;*/
    height: 809px;
  }

  /* 用户 */
  .user-info-group {
    width: 500px;
    background: #F1F4F6;
    z-index: 99;
    border-top: 1px solid #FFFFFF;
    display: block;
    height: 100%;
  }

  .user-info {
    height: 250px;
    background: #18BC9C;
    overflow: hidden;
    margin-bottom: 50px;
  }

  .user-info .user-face {
    display: block;
    margin: 30px auto;
    float: none;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #FFF;
    border: 2px solid #FFF;
  }

  .user-info .user-info-text {
    width: 100%;
    display: block;
    text-align: center;
    color: #fbfbfb;
    font-size: 14px;
    margin: 8px 0;
  }

  .user-info .user-info-name {
    font-size: 16px;
    font-weight: bold;
  }

  .el-form {
    width: 90%;
    margin: 0 auto;
  }

  /* 日志记录 */
  .log-table {
    flex: 1;
    margin: 0 15px;
  }

  .el-table {
    width: 100% !important;
  }

  .el-row, .el-pagination {
    margin: 15px 0;
  }

  .el-pagination {
    text-align: center;
  }


</style>
